<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>register</title>
    <link rel="stylesheet" href="lib/datepicker/skin/WdatePicker.css">
    <link rel="stylesheet" href="lib/bootstrap.min.css">
</head>
<style>
    #pop {
        width: 600px;
        padding: 20px 50px;
        background-color: rgb(104, 122, 90);
        position: fixed;
        left: 50%;
        top: 50%;
        border-radius: 10px;
        transform: translate(-50%, -50%);
    }
</style>

<body>
    <div id="pop">
        <h1 style="text-align: center;">注册</h1>
        <div class="form-horizontal">
            <div class="form-group">
                <label for="data-name" class="col-sm-2 control-label">姓名</label>
                <div class="col-sm-10">
                    <input type="text" class="form-control" id="data-name" placeholder="姓名">
                </div>
            </div>
            <div class="form-group">
                <label for="data-name" class="col-sm-2 control-label">密码</label>
                <div class="col-sm-10">
                    <input type="password" class="form-control" id="data-password" placeholder="密码">
                </div>
            </div>
            <div class="form-group">
                <label for="data-name" class="col-sm-2 control-label">确认密码</label>
                <div class="col-sm-10">
                    <input type="password" class="form-control" id="data-repassword" placeholder="确认密码">
                </div>
            </div>
        </div>
        <div class="form-group">
            <label for="data-age" class="col-sm-2 control-label">选择</label>
            <label class="radio-inline">
            <input type="radio" name="sex" checked   id="student">学生
        </label>
            <label class="radio-inline">
            <input type="radio" name="sex" >老师
        </label>
            <div class="form-group" style="float:right;margin-top:20px;">
                <button id="register" class="btn btn-primary">点击注册</button>

            </div>
        </div>
    </div>
    <script src="lib/datepicker/WdatePicker.js"></script>
    <script src="lib/jquery.min.js"></script>
    <script src="lib/common.js"></script>
    <script>
        $("#register").click(function() {
            if ($("#data-name").val() && $("#data-password").val() && $("#data-repassword")) {
                if ($("#data-password").val() !== $("#data-repassword").val()) {
                    alert("两次输入的密码不一致")
                    return
                }
                $.ajax({
                    url: `${address}/register`,
                    data: {
                        username: $("#data-name").val(),
                        password: $("#data-password").val(),
                        repassword: $("#data-repassword").val(),
                        usertype: $("#student")[0].checked ? 1 : 0
                    },
                    success(data) {
                        if (data === "error") {
                            alert("注册失败")

                        } else {
                            alert("注册成功")
                            location.href = `${address}/login.html`
                        }
                    }
                })

            }
        })
    </script>
</body>

</html>